<template>
	<div class="edge-config-box">
		<el-collapse v-model="activeNames">
			<el-collapse-item title="线条配置" name="1">
				<el-row align="middle">
					<el-col :span="8">宽</el-col>
					<el-col :span="12">
						<el-slider :min="1" :max="20" :step="1" v-model="lineAttrs.strokeWidth" />
					</el-col>
					<el-col :span="2" class="public-result">
						{{ lineAttrs.strokeWidth }}
					</el-col>
				</el-row>
				<el-row align="middle">
					<el-col :span="8">颜色</el-col>
					<el-col :span="14">
						<el-input type="color" v-model="lineAttrs.stroke" />
					</el-col>
				</el-row>
				<el-row align="middle">
					<el-col :span="8">虚线长度</el-col>
					<el-col :span="14">
						<el-inputNumber
							v-model="lineAttrs.strokeDasharray"
							:step="1"
							:min="0"
							:max="360"
							style="width: 100%"
							controls-position="right"
						/>
					</el-col>
				</el-row>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { FlowGraph } from "@/views/FlowGraph/graph";
import type { Attr } from "@antv/x6/lib/registry";
import type { Edge } from "@antv/x6";

const props = defineProps<{ id: string }>();

let cell: Edge;
const { graph } = FlowGraph;
const activeNames = ref(["1", "2"]);
// 线条属性
const lineAttrs = ref<Attr.ComplexAttrs>({} as any);

// 获取边的配置
watch(
	() => props.id,
	(id) => {
		if (!id) return;
		const curentCell = graph.getCellById(id);
		if (!curentCell || !curentCell.isEdge()) {
			return;
		}
		cell = curentCell;
		lineAttrs.value = cell.getAttrs().line as Attr.CellAttrs;
	},
	{ immediate: true }
);

// 设置边的属性
watch(
	lineAttrs,
	() => {
		cell.attr("line", lineAttrs.value);
	},
	{ deep: true }
);

// return { activeNames, lineAttrs };
//   }
// });
</script>
